import { useDrop } from "react-dnd";
import { useComponentConfigStore } from "../store/component-config";
import { useComponetsStore } from "../store/components";

export function useMaterailDrop(accept: string[], id: number) {
	const { addComponent } = useComponetsStore();
	const { componentConfig } = useComponentConfigStore();

	const [{ canDrop }, drop] = useDrop(() => ({
		accept,
		drop: (item: { type: string }, monitor) => {
			const didDrop = monitor.didDrop();
			if (didDrop) {
				return;
			}
			const { desc , defaultProps: props } = componentConfig[item.type];
			addComponent(
				{
					id: new Date().getTime(),
					name: item.type,
                    desc,
					props,
				},
				id
			);
		},
		collect: (monitor) => ({
			canDrop: monitor.canDrop(),
		}),
	}));

	return { canDrop, drop };
}
